<template>
  <div data-title="提现" class="content-wrap">
    <div class="content">
      <div class="count">
        <div class="text">总金额(元)</div>
        <div class="num">{{withdrawal.all_amount}}</div>
      </div>
      <div class="details">
        <div class="can">
          <div class="text">可提现(元)</div>
          <div class="num">{{withdrawal.promoter_balance}}</div>
        </div>
        <div class="cant">
          <div class="text">待生效(元)</div>
          <div class="num">{{withdrawal.frozen_amount}}</div>
        </div>
      </div>
    </div>
    <!-- <div class="type">
      <div class="avatar bank"></div>
      <div class="text">
        <div class="tag">推荐秒到</div>
        提现到银行卡
      </div>
    </div> -->
    <div class="type">
      <div class="avatar alipay"></div>
      <a href="/my/withdrawal/account" class="text">提现到支付宝</a>
    </div>
  </div>
</template>

<script setup>
    import useWithdrawal from '@/hooks/useWithdrawal';
    const { withdrawal,viewAccount } = useWithdrawal();
    import { onMounted } from 'vue'
    onMounted(()=>{
        viewAccount()
    })
</script>

<style lang="scss" scoped>
.content-wrap {
  width: 10rem;
  height: 100vh;
  background-color: #f4f4f4;
  overflow: hidden;
}

.content-wrap .content {
  width: 9.36rem;
  background-color: #fff;
  border-radius: 0.26667rem;
  margin: 0.32rem auto 0;
  padding-bottom: 0.72rem;
}

.content-wrap .content .count,
.content-wrap .content {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.content-wrap .content .count .text {
  font-size: 0.34667rem;
  color: #999;
  font-weight: 500;
  margin-top: 0.54667rem;
}

.content-wrap .content .count .num {
  font-size: 0.85333rem;
  color: #333;
  font-weight: 700;
  margin-top: 0.16rem;
}

.content-wrap .details {
  margin-top: 0.38667rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-wrap .details .text {
  font-size: 0.34667rem;
  color: #999;
  font-weight: 500;
}

.content-wrap .details .num {
  font-size: 0.62667rem;
  font-weight: 700;
  margin-top: 0.17333rem;
}

.content-wrap .details .can {
  width: 50%;
}

.content-wrap .details .can .num {
  color: #e33e37;
}

.content-wrap .details .cant {
  width: 50%;
}

.content-wrap .details .cant .num {
  color: #39856b;
}

.content-wrap .type {
  width: 9.36rem;
  height: 1.6rem;
  background-color: #fff;
  border-radius: 0.26667rem;
  margin: 0.32rem auto 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.content-wrap .type .avatar {
  width: 0.85333rem;
  height: 0.85333rem;
  border-radius: 0.42667rem;
  background-color: #000;
  margin-left: 0.42667rem;
}

.content-wrap .type .alipay {
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-alipay.png)
    50%/100% no-repeat;
}

.content-wrap .type .wxpay {
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-wxpay.png)
    50%/100% no-repeat;
}

.content-wrap .type .bank {
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-bankcard.png)
    50%/100% no-repeat;
}

.content-wrap .type .text {
  font-size: 0.42667rem;
  font-weight: 500;
  color: #999;
  margin-left: auto;
  margin-right: 0.41333rem;
  padding-right: 0.42667rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-more.png)
    100%/0.17333rem 0.29333rem no-repeat;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.content-wrap .type .text .tag {
  border: 1px solid #1677ff;
  color: #1677ff;
  font-size: 0.29333rem;
  font-weight: 500;
  text-align: center;
  padding: 0.04rem 0.16rem 0.04rem;
  border-radius: 0.05333rem;
  margin-right: 0.13333rem;
}
</style>